<template>
  <a-select v-model:value="value_" placeholder="请选择" @change="inputHandler" style="width: 260px">
    <a-select-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.value"
      :value="item.key"
    />
  </a-select>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, UnwrapRef, watch } from 'vue';
  import { Select } from 'ant-design-vue';
  import { ConfigItem } from './control.data';
  export default defineComponent({
    components: { ASelectOption: Select.Option, [Select.name]: Select },
    props: {
      value: { type: String },
      config: { type: Object as PropType<ConfigItem>, default: () => ({} as ConfigItem) },
    },
    emits: ['update:value'],
    setup(props, { emit }) {
      const options = ref([]);

      const value_ = ref(props.value);
      const config: UnwrapRef<ConfigItem> = reactive<ConfigItem>(props.config);

      const inputHandler = (e) => {
        const { value } = e.target;
        emit('update:value', value);
      };

      const updateOptions = (config: ConfigItem) => {
        if (config.options && config.options.length) {
          options.value = JSON.parse(JSON.stringify(config.options));
        }
      };

      updateOptions(config);

      watch(
        () => config,
        (val) => {
          updateOptions(val);
        }
      );

      return {
        inputHandler,
        value_,
        options,
      };
    },
  });
</script>
